<!DOCTYPE HTML>
<html>
 <head>
  <title> Sample - Class: js.ui.PopupDialog (按CSS1标准样式) </title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script appName="jsdk" debug="false" develop="false" src="../../../../common/jsdk_loader.js">
  $import("js.dom.DOMTemplate");
  $import("js.dom.HTML");
  $import("js.dom.HTMLForm");
  $import("js.ui.PopupDialog");
  </script>
  <script src="../../../example.js"></script>
  <style>
  	html,body{
		font-size: 9pt;
		font-family: arial;
	}
	.label{
		width: 100px;
		display: inline-block;
		vertical-align: top;
	}
  </style>
  <script>jsdk.Class.forName("js.ui.PopupDialog");
	jsdk.PopupDialog.setStyleSkin("std");
	function showFromHtml(){
		jsdk.PopupDialog.show(
			jsdk.dom("#F_DialogCode")[0].value,"",
			{
				owner: jsdk.dom("#F_Value#")[0],
				event: event||window.event,
				mode: 1
			},
			{
				width: 300,
				height: 100
			},
			function(vReturnValue){
				alert('return ok!');
			}
		)
	}
	function showFromHtmlId(){
		jsdk.PopupDialog.show(
			"#F_DialogCode","",
			{
				owner: jsdk.dom("#F_Value#")[0],
				event: event||window.event,
				mode: 1
			},
			{
				width: 300,
				height: 100
			},
			function(vReturnValue){
				alert('return ok!');
			}
		)
	}
	function showFromPage(){
		jsdk.PopupDialog.show(
			jsdk.dom("#F_DialogCode")[0].value,"",
			{
				owner: jsdk.dom("#F_Value#")[0],
				event: event||window.event,
				driver: "page",
				mode: 1
			},
			{
				height: 300
			},
			function(vReturnValue){
				alert('return ok!');
			}
		)
	}
	function showFromTemplate(){
		jsdk.PopupDialog.show(
			"books.tpl.htm",
			{
				books:[
					{name:"hibernate实战教程", author:"李永胜", plsh:"李永胜出版社", price: "50.00"},
					{name:"ajax and jtle文档", author:"李永胜", plsh:"李永胜出版社", price: "0.00"},
					{name:"spring webflow教程", author:"李永胜", plsh:"李永胜出版社", price: "60.00"},
					{name:"dwr应用", author:"李永胜", plsh:"李永胜出版社", price: "30.00"}
				]
			},
			{
				owner: jsdk.dom("#F_Value#")[0],
				event: event||window.event,
				driver: "template",
				mode: 1
			},
			{
				height: 300
			},
			function(vReturnValue){
				alert('return ok!');
			}
		)
	}
	function showFromTemplId(){
		jsdk.PopupDialog.show(
			jsdk.dom("#F_DialogCode")[0].value||"tplBooks",
			{
				books:[
					{name:"hibernate实战教程", author:"李永胜", plsh:"李永胜出版社", price: "50.00"},
					{name:"ajax and jtle文档", author:"李永胜", plsh:"李永胜出版社", price: "0.00"},
					{name:"spring webflow教程", author:"李永胜", plsh:"李永胜出版社", price: "60.00"},
					{name:"dwr应用", author:"李永胜", plsh:"李永胜出版社", price: "30.00"}
				]
			},
			{
				owner: jsdk.dom("#F_Value#")[0],
				event: event||window.event,
				driver: "template",
				mode: 1
			},
			{
				height: 300
			},
			function(vReturnValue){
				alert('return ok!');
			}
		)
	}
	function selectFromArr(){
		alert('to do...');
	}
	function selectFromFun(){
		alert('to do...');
	}
	function selectFromUrlXML(){
		alert('to do...');
	}
	function selectFromUrlJSON(){
		var owner=jsdk.dom("#F_Value#")[0];
		var sep=sep||",";
		var allowMultiple=true;
		var values=owner.value==""?[]:owner.value.split(sep);
		jsdk.PopupDialog.show(
			"selector.tpl.htm",
			{
				para: {
					values: values,
					isMulti: allowMultiple,
					optionalValues: ["你","是","我","的"]
				},
				init: function(oDialog,oContainer){
					var thisform=jsdk.dom("form",oContainer)[0];
					jsdk.HTMLForm.applyInstance(thisform,"copy",false);
					jsdk.dom("#btnOK#",oContainer)[0].attachEvent("onclick",function(){
						var value=thisform.getItemValue("F_Value");
						if(allowMultiple.isMulti&&!(value instanceof Array)){
							oDialog.returnValue=[value];
						}else{
							oDialog.returnValue=value;
						}
						oDialog.hide();
					});
					jsdk.dom("#btnCancel#",oContainer)[0].attachEvent("onclick",function(){
						oDialog.hide();
					});
				}
			},
			{
				owner: owner,
				event: event||window.event,
				driver: "template",
				mode: 1
			},
			{
				width: 200,
				height: 200,
				style: (jsdk.Browser.Engine.trident&&document.compatMode!="CSS1Compat"?"selector.IE.css":"selector.css")
			},
			function(vReturnValue){
				if(vReturnValue!=undefined){
					owner.value=allowMultiple?vReturnValue.join(sep):vReturnValue;
				}
				//alert('return ok!');
			}
		)
	}
	function selectFromXML(){
		alert('to do...');
	}
	function selectFromJSON(){
		alert('to do...');
	}
	function showMessage(){
		jsdk.PopupDialog.show(
			jsdk.dom("#F_DialogCode")[0].value,"",
			{
				owner: jsdk.dom("#F_Value#")[0],
				event: event||window.event,
				driver: "html",
				mode: jsdk.PopupDialog.DISPLAY_MODE_POSITION
			},
			{
				width: 500,
				height: 300,
				left: 200,
				top: 50
			},
			function(vReturnValue){
				alert('return ok!');
			}
		)
	}
	function previewPhoto(photo){
		jsdk.PopupDialog.show(
			"<img width=\"100%\" src=\"photo/"+photo+"\">","",
			{
				owner: jsdk.dom("#F_Value#")[0],
				event: event||window.event,
				driver: "html",
				mode: jsdk.PopupDialog.DISPLAY_MODE_POSITION
			},
			{
				width: 800,
				height: 500,
				left: 150,
				top: 50
			},
			function(vReturnValue){
				alert('return ok!');
			}
		)
	}
  </script>
 </head>

 <body>
	<div style="border-bottom: solid 1px gray;margin-bottom: 12px;padding-bottom: 12px">
		<div style="height: 120px">
			<div style="float:left">
				<h3><script>document.write(example.title)</script> (按标准CSS1样式)</h3>
				弹出对话框 V1.5 beta 20120427
				<ul>
					<li>支持IE6、IE7、IE8+、Firefox4+、Chrome13+、Safari5+、Opera11+、iPad Safari
					<li>支持右键弹出、下拉弹出、定位弹出等三种定位。
				</ul>
			</div>
		</div>
	</div>
	<span class="label">Value: </span><input type="text" name="F_Value" style="width: 85%"><br>
	<span class="label">Dialog Code: </span><textarea type="text" id="F_DialogCode" name="F_DialogCode" style="width: 85%;height: 200px"></textarea><br>
	<span class="label"></span>
	<input type="button" value="show(html)" onclick="showFromHtml();">
	<input type="button" value="show(htmlById)" onclick="showFromHtmlId();">
	<input type="button" value="show(page)" onclick="showFromPage();">
	<input type="button" value="show(template)" onclick="showFromTemplate();">
	<input type="button" value="show(templateById)" onclick="showFromTemplId();">
	<br>
	<span class="label"></span>
	<input type="button" value="select(array)" onclick="selectFromArr();">
	<input type="button" value="select(function)" onclick="selectFromFun();">
	<input type="button" value="select(url(xml))" onclick="selectFromUrlXML();">
	<input type="button" value="select(url(json))" onclick="selectFromUrlJSON();">
	<input type="button" value="select(xml)" onclick="selectFromXML();">
	<input type="button" value="select(json)" onclick="selectFromJSON();">
	<br><br>
	<span class="label"></span>
	<input type="button" value="show message" onclick="showMessage();">
	<a href="javascript:void(0)" onclick="previewPhoto('天堂.jpg');">天堂</a> 
	<a href="javascript:previewPhoto('晴朗的大海.jpg');void(0)">晴朗的大海</a>

	<script id="tplBooks" type="text/html">
	   <table width="80%">
		 <tr bgcolor="#DEB887"><td>书籍名称</td><td>作者</td><td>出版社</td><td>价格</td></tr>
		 <% for(var n = 0; n < books.length; n++) {
			  var book = books[n];
			  if(n % 2 != 0) { 
		  %>
		  <tr bgcolor="#DCDCDC"><td>${book.name}</td><td>${book.author}</td><td>${book.plsh}</td><td>${book.price}</td></tr>
		 <% }else{   %>
		   <tr bgcolor="#FFFFE0"><td>${book.name}</td><td>${book.author}</td><td>${book.plsh}</td><td>${book.price}</td></tr>
		 <% } }  %>
	   </table>
	</script>
	<div style="height: 500px"></div>
 </body>
</html>
